<template>
  <div class="goodsList-warp" ref="goodsListWarp">
    <!-- <v-header title="全部分类"/> -->
    <div class="topBox">
      <div class="address-menu">
        <selector title="" :options="schoolList" v-model="nowSchoolId" @on-change="filterSchool(nowSchoolId)"></selector>
      </div>
      <!-- <div :class="{ 'active': isActive, seqBox:true}"> -->
      <div :class="[isSeqActive ? 'active' : '',isOpen ? 'open' : '', 'seqBox','flex']" @click="openSeq">
        <div>{{'默认排序'}}</div>
        <img :src="seqImg">
      </div>
      <div :class="[isFiltActive ? 'active' : '',isOpen ? 'open' : '', 'filterBox','flex']" @click="openFilter">
        <div>{{'条件筛选'}}</div>
        <img :src="filtImg">
      </div>
    </div>
    <scroller lock-x :height="scrollHeight" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
      <ul class="shop-list" >
        <li class="cell-box flex" @click="goGoodsDetail(item)" v-for="(item,index) in goodsList"  :key="index">
          <div class="item-box flex">
            <img :src="item.logo" alt="" class="left">
            <div class="center">
                <div class="name-box">{{item.name}}</div>
                <div class="section-line">
                    ¥{{item.price}}
                </div>
                <div class="supplement">
                  <span>{{item.shopName}}</span>
                  <span>{{item.createDateName}}</span>
                </div>
            </div>
          </div>
        </li>
        <load-more :tip="loadingText" :show-loading="onFetching"></load-more>
      </ul>
    </scroller>
    <div>
      <x-dialog :show.sync="showDialog" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%',height: 'auto', 'background-color': 'transparent'}" class="dialog-demo">
        <div v-if="showSeq" class="seq-box">
          <ul>
            <li @click="handlePriceSeq(0,'')" :class="[isActiveLi==0 ? 'active':'']">默认排序</li>
            <li @click="handlePriceSeq(1,'1')" :class="[isActiveLi==1 ? 'active':'']">价格由低到高</li>
            <li @click="handlePriceSeq(2,'2')" :class="[isActiveLi==2 ? 'active':'']">价格由高到低</li>
          </ul>
        </div> 
        <div v-else class="filter-box">
          <div class="priceBox">
            <div class="title">价格范围 （元）</div>
            <div class="inputBox">
                <input type="number" placeholder="最低价" v-model="minPrice" name="minPrice"> －
                <input type="number" placeholder="最高价" v-model="maxPrice" name="maxPrice">
            </div>
          </div>
          <!-- <div class="typeBox">
            <div class="title">选择类型</div>
            <div class="btnBox">
              <button :class="[filterType==0 ? 'active':'']">同城</button>
              <button :class="[filterType==1 ? 'active':'']">包邮</button>
              <button :class="[filterType==2 ? 'active':'','lastBtn']">全新</button>
            </div>
          </div> -->
          <div class="bomBox flex">
              <div class="cancel" @click="clearFilter">清空</div>
              <div class="com" @click="handlePriceFilter">确定</div>
          </div>
        </div>
        <!-- <x-icon @click="chooseKind=false" type="ios-close-outline" style="fill:#fff;margin-top: 8px;"></x-icon>-->
        <!-- <div @click="showDialog=false">
          <span class="vux-close">关闭</span>
        </div> -->
      </x-dialog>
    </div>
  </div>
</template>
<script>
import axios from '@/api/request'
import { Selector,Cell,XDialog,Group,LoadMore,Scroller } from "vux";
import ShopItem from "../components/shopItem";
import Header from "../components/header";
import { mapState, mapGetters } from "vuex";
function upInDown(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i].price < arr[j].price) {
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}
function downInUp(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i].price > arr[j].price) {
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}
export default {
  name: "category",
  components: {
    ShopItem,
    Selector,LoadMore,Scroller,
    Cell,XDialog,Group,
    'v-header':Header,
  },
  data() {
    return {
      onFetching: false,
      loadingText: '',
      scrollHeight: null,
      isSeqActive: true,
      isFiltActive: false,
      isOpen: false,
      seqImg: require('../assets/images/reddown.png'),
      filtImg: require('../assets/images/down.png'),
      showDialog: false,
      filterList: [],
      filterType: "defalut",
      isActiveLi: 0,
      filterType: 0,
      showSeq: false,
      minPrice: null,
      maxPrice: null,
      nowSchoolId: '',
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        param:{
          kindId : '',    // 顶部导航栏给的id
          kindName : '',    
          firstKindId: '',
          firstKindName: '',
          sequence: '',    //1由低到高，2是由高到低
          minPrice: null,
          maxPrice: null,
          sold: '',
          name: ''
        },
      },
      _userId: '',
      getBarWidth: function (index) {
        return (index + 1) * 22 + 'px'
      },
      sortPrice: "up", //up为由高到底，down由底到高
      goodsList: [],
      // goodsList: [
      //   {
      //     id: parseInt(Math.random() * 10000),
      //     name: "完美芦荟胶40g补水保湿完美芦荟胶40g补水保湿完美芦荟胶40g补水保湿完美芦荟胶40g补水保湿",
      //     price: parseInt(Math.random() * 100),
      //     type: "1天前发布",
      //     pic: require("../assets/images/cate1.png"),
      //     address: "洪山区 华夏学院"
      //   },
      // ],
      schoolList: [],
    };
  },
  computed:{
      ...mapGetters({
        openId: 'doneOpenId',
        userId: 'doneUserId',
        phone: 'donePhone',
        schoolId: 'doneSchoolId',
      }),
  },
  created() {
    this._userId = this.$route.query.userId
    if(!this._userId){
        this._userId = this.userId
    }
    goodsName = this.$route.query.name

    let kindId,kindName,firstKindId,firstKindName,sold,goodsName;
        goodsName = this.$route.query.name
        sold = this.$route.query.sold
        kindId = this.$route.query.kindId
        kindName = this.$route.query.kindName   
        firstKindId= this.$route.query.firstKindId
        firstKindName= this.$route.query.firstKindName
        this.listQuery.param.name = goodsName  //从高到底
        this.listQuery.param.sold = sold  //从高到底
        this.listQuery.param.kindId = kindId
        this.listQuery.param.kindName = kindName
        this.listQuery.param.firstKindId = firstKindId
        this.listQuery.param.firstKindName = firstKindName
        console.log(firstKindId)
        console.log(this.$route.query)
    this.fetchSecondList();
    // this.fetchGoodsList();
  },
  mounted() {
    this.$nextTick(() => {
      var appHeight = this.$refs.goodsListWarp.offsetHeight
      this.scrollHeight = appHeight-47.5 + 'px'
    })
  },
  methods: {
    openSeq(){
      this.isSeqActive = true
      this.isFiltActive = false
      this.seqImg = require('../assets/images/reddown.png')
      this.filtImg = require('../assets/images/down.png')
      this.showDialog = true
      this.showSeq = true
    },
    openFilter(){
      this.isSeqActive = false
      this.isFiltActive = true
      this.seqImg = require('../assets/images/down.png')
      this.filtImg = require('../assets/images/reddown.png')
      this.showDialog = true
      this.showSeq = false
    },
    filter(type = "") {
      switch (type) {
        case "new":
          this.newShop();
          break;
        case "default":
        default:
          this.default();
      }
    },
    newShop() {
      this.filterList = this.goodsList.filter(shop => {
        return shop.type === "上新";
      });
    },
    default() {
      this.filterList = this.goodsList.filter(shop => {
        return true;
      });
    },
    //获取学校列表
    fetchSecondList() {
      var self = this;
      axios('/device/school/list','post',{}).then(res=>{
          if(res.data.code==1000){
              // console.log(res)
              let arr = res.data.data.list
              for(let i in arr){
                 this.schoolList.push({key: arr[i]['id'],value: arr[i]['name']})
              }
              // console.log(this.schoolList)
              this.nowSchoolId = this.schoolId
          }
      })		
    },	
    onScrollBottom(){   //滑动加载
      let self = this
      if(this.onFetching) {
          // do nothing
      }else {
        this.onFetching = true
        this.loadingText = "loading"
        this.listQuery.pageNumber+=1
        this.fetchGoodsList()
      }
    },		
    //获取商品列表
    fetchGoodsList() {
      axios('/device/product/list','post',this.listQuery).then(res=>{
        if(res.data.code==1000){
          console.log(res)
          var goodsList = res.data.data.list;
          if(goodsList.length==0){
            this.listQuery.pageNumber-=1
            this.loadingText = "没有数据啦·～～·"
          }
          else{
            this.goodsList = this.goodsList.concat(goodsList)
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
          }
          this.onFetching = false
        }
      })		
    },
    filterSchool(val) {
      if(val){
        this.$refs.scrollerBottom.scrollTop = 0
        this.goodsList = []
        this.listQuery.pageNumber = 1
        this.listQuery.param.schoolId = val
        this.fetchGoodsList()
      }
    },
    handlePriceSeq(idx,seq){
      // console.log(idx)

      this.goodsList = []
      // this.$nextTick(()=> {
          // let aa = self.$refs.chatBoxDemo.offsetHeight
          // console.log(aa)
          // self.$refs.chatBoxScroll.scrollTop = aa;
          this.$refs.scrollerBottom.reset()
          this.$refs.scrollerBottom.scrollTop = 0
          let aa = this.$refs.scrollerBottom
          let bb = this.$refs.goodsListWarp
          console.log(9999)
          console.log(aa)
          console.log(bb)
      // })
      this.listQuery.pageNumber = 1
      this.isActiveLi = idx;
      this.listQuery.param.sequence = seq
      this.fetchGoodsList();
    },	
    handlePriceFilter() {
      this.$refs.scrollerBottom.scrollTop = 0
      this.goodsList = []
      this.listQuery.pageNumber = 1
      this.listQuery.param.minPrice = this.minPrice
      this.listQuery.param.maxPrice = this.maxPrice
      // this.filterPriceList();
      this.fetchGoodsList()
      this.showDialog = false
    },
    clearFilter() {
      this.minPrice = ""
      this.maxPrice = ""
    },
    goGoodsDetail(item){
      this.$router.push({path:'goodsDetail',query:{goodsId:item.id,userId:this._userId}})
    }
  }
};
</script>
<style lang="less">
.goodsList-warp .weui-mask{
    top: 95rem/75;
}
.goodsList-warp .weui-dialog{
  position: fixed;
  z-index: 5000;
  // display: flex;
  // flex-direction: column;
  width: 100%;
  height:inherit;
  top: 95rem/75;
  // right: 0;
  // bottom: 0;
  left: 0;
  margin: 0;
  background-color: #FFFFFF;
  text-align:left;
  border-radius: 0px;
  overflow: hidden;
  .seq-box{
    text-align: center;
    background: #fff;
    ul{
      padding: 0 54rem/75;
      li{
        height: 88rem/75;
        line-height: 88rem/75;
        border-bottom: 1px solid #efefef;
        color: #333;
      }
      li.active{
        color: #ff4444;
      }
    }
  }
  .filter-box{
    background: #fff;
    overflow: hidden;
    .title{
      margin-top: 46rem/75;
      margin-left: 30rem/75;
      font-size: 30rem/75;
      color: #333;
    }
    .priceBox{
      .inputBox{
        padding-left: 30rem/75;
        padding-top: 36rem/75;
        input{
          width: 200rem/75;
          height: 72rem/75;
          border: 1px solid #999;
          border-radius: 4px;
          text-align: center;
          // 这里是起点
        }
      }
    }
    .typeBox{
      .btnBox{
        padding-left: 30rem/75;
        padding-top: 36rem/75;
        button{
          width: 200rem/75;
          height: 72rem/75;
          box-sizing: border-box;
          border: 1px solid #999; 
          color: #666;
          margin-right: 38rem/75;
          background: #fff;
          border-radius: 5rem/75;
          font-size: 28rem/75;
        }
        button.active {
          background: #ff4444;
          color: #fff;
          border: 0;
        }
        .lastBtn{
          margin-right: 0;
        }
      }
    }
    .bomBox{
      margin-top: 80rem/75;
      div{
        width: 50%;
        height: 96rem/75;
        line-height: 96rem/75;
        text-align: center;
        background: #eee;
        color: #333;
        font-size: 30rem/75;
      }
      div.com{
        background: #ff4444;
        color: #fff;
      }
    }
  }
  
}



.goodsList-warp .topBox .weui-cell_select .weui-select{
  padding-right: 0;
}
</style>
<style lang="less" scoped>
.supplement span{
  flex:1;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.goodsList-warp{
  height: 100%;
  box-sizing: border-box;
  background: #f3f5f9;
  .weui-mask{
    top: 95rem/75;
    .seq-box{
      background: #fff;
    }
  }
  .topBox{
    display: flex;
    height: 47.5px;
    border-bottom: .013333rem /* 1/75 */solid #dcdcdc;
    align-items: center;
    background: #fff;
    z-index: 9999;
    .address-menu{
      h2{
        padding-left: .693333rem /* 52/75 */;
        color: #333333;
      }
    }
        // 这里是终点
    .seqBox{
      width: 266rem/75;
      border-left: 1px solid #ddd;
      padding-left: 64rem/75;
      margin-left: 30rem/75;
      align-items: center;
      div{
        // margin-right: 5rem/75;
      }
      img{
        margin-left: 10rem/75;
        width: 20rem/75;
        height: 12rem/75;
      }
    }
    .seqBox.active{
      color: #ff4444;
    }
    .filterBox{
      width: 242rem/75;
      border-left: 1px solid #ddd;
      padding-left: 64rem/75;
      align-items: center;
      div{
        // margin-right: 5rem/75;
      }
      img{
        margin-left: 10rem/75;
        width: 20rem/75;
        height: 12rem/75;
      }
    }
    .filterBox.active{
      color: #ff4444;
    }
  }
  .shop-list{
    // display: flex;
    // flex-wrap: wrap;
    background: #fff;
    margin-top: 16rem/75;
    padding: 20rem/75;
    padding-top: 0;
    li{
      width: 100%;
      height: 296rem/75;
      // border-bottom: 1px solid #efefef;
      .item-box {
        width: 100%;
        background: #fff;
        height: 296rem/75;
        border-bottom: 1px solid #efefef;
        .left {
            width: 180rem/75;
            height: 234rem/75;
            margin-left: 24rem/75;
            margin-top: 32rem/75;
        }
        .center {
            width: 430rem/75;
            margin-top: 32rem/75;
            margin-left: 52rem/75;
            .name-box {
                height: 78rem/75;
                font-size: 15rem/37.5;
                color: #333;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .section-line {
                font-size: 15rem/37.5;
                color: #ff4444;
                margin-top: 40rem/75;
            }
            .supplement{
                display: flex;
                color: #979797;
                font-size: 22rem/75;
                justify-content: space-between;
                margin-top: 8rem/75;
                // padding-bottom: 6rem/37.5;
            }
        }
      }
    }
  }
}
</style>


